<!DOCTYPE html>
<html>
<head>
	<title>ComSym: a 'reply' button for comment system with ratings</title>
	<link rel="stylesheet" href="comsym.css"/>
	<script type="text/javascript" src="p.js"></script>
	<script type="text/javascript" src="comsym.js"></script>
	<script type="text/javascript">
	function postComment(rate)
	{
		var msg = w.getMessage();
		if (!msg.empty())
		{
			var c = new Element('div', { 'className': 'a_comment' });
			c.appendChild(new Element('em').update('[Rate: ' + rate + '] '));
			c.appendChild(new Element('span').update(msg));
			$('comments').appendChild(c);
		}

		var r = $('rate');
		var curr = parseInt(r.innerHTML);
		if (curr < 0)
			r.removeClassName('minus');
		else if (curr > 0)
			r.removeClassName('plus');
		curr += rate;
		if (curr < 0)
			r.addClassName('minus');
		else if (curr > 0)
			r.addClassName('plus');
		r.update(curr);
	}

	function reset()
	{
		var r = $('rate');
		r.update(0);
		r.removeClassName('minus');
		r.removeClassName('plus');
		$('comments').update();
		w.setMessage('');
	}

	var w;
	Event.observe(window, 'load', function () {
		w = new ComSym_ReplyBtn({
			elem:        'comsym',
			onClick:      postComment.bind(this, 0),
			onPlusClick:  postComment.bind(this, 1),
			onMinusClick: postComment.bind(this, -1)
		});

		$('reset').observe('click', reset.bind(this));
	});
	</script>
</head>
<body>
	<h1>ComSym: reply button for comment system with ratings</h1>
	<p>This idea to simply try to combine rating and reply actions together. Consider an 
	often situation when user reads an article or comment and wants to comment it. Also, 
	he would rate this article. So, what really happens: user votes for article then 
	he writes a comment and presses a 'Comment' button. Why not combine these actions 
	together?</p>
	<p>When message is empty widget behaves in 'Rate' mode, no 'Comment' button, plus/minus 
	only. When user inputs some message widget becomes in 'Comment' mode and 'Comment' 
	button appears. The visual representation is fully customizable by CSS.</p>
	<p>Supports keyboard like regular buttons, such as TAB, Enter, Space.</p>
	<p>Rate: <span id="rate">0</span></p>
	<div id="comsym"></div>
	<hr/>
	<span id="reset">Reset</span>
	<div id="comments"></div>
</body>
</html>
